<template>
  <div class="col main-content mt-15 mb-15" >
    <el-table
      :data="districts"
      border
      tooltip-effect="dark">
      <el-table-column
        type="selection"
        width="48"
        fixed
      >
      </el-table-column>
      <h-tree-grid
        label="名称"
        prop="name"
        :remote="remote"
      >

      </h-tree-grid>
      <el-table-column
        prop="pinyin"
        label="拼音"
        width="120">
      </el-table-column>
      <el-table-column
        prop="zipcode"
        label="邮编"
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
      >
      </el-table-column>
      <el-table-column
        label="操作" align="center" width="160px">
        <template slot-scope="scope">
          <el-button type="text">
            添加子节点
          </el-button>
          <el-button type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style>

</style>
<script>
  import AdminService from 'src/service/admin'
  import HTreeGrid from 'src/components/common/HTreeGrid'

  export default {
    components: {HTreeGrid},
    name: 'HAdminDistrict',
    data() {
      return {
        districts: []
      }
    },
    methods: {

      getData: function (id) {
        const me = this
        AdminService.districts(id).then(function (data) {
          if (data != null) {
            me.districts = data.datas
          }
        })
      },
      remote: function (row, fun) {
        AdminService.districts(row.id).then(function (data) {
          if (data != null) {
            fun(data.datas)
          }
        })
      }
    },
    beforeMount: function () {
      this.getData(0)
    }
  }
</script>
